<!-- 
	* 摘要：品牌商商品管理
	* 软件名称：闪酿鸿蒙版APP
	* 文件名: productMange.vue
	* 版本：1.2.0
 -->
<template>
	<view class="owner-item-content">
	
		<z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" :auto="true">
			<template #top>
			<view class=""style="background-color: #F8F8F8;">
				<u-navbar :border-bottom="false" title="商品" :background="{'background':'#F8F8F8'}" :title-size="36" :title-bold="true" :title-color="textColor">
					<template #right>
						<view class="u-p-r-20"  @click="$mRouter.push({ route: '/pages/owners/productMange/productDetails?type=add'})">
							新增
						</view>
					</template>
				
				</u-navbar>
				<view class="u-p-20" style="background-color: #F8F8F8;">
					<u-search :searchIconFlag="true" v-model="searchText" input-align="center" placeholder="商品名称" height="70" :border-color="'#FFBB1A'" :bg-color="'#F8F8F8'" 	:show-action="false" @change="reloadFn" @search="reloadFn"></u-search>
				</view>
				<view class="filter-container">
					<view class="filter-top u-flex u-row-between">
						<view :class="['filter-top-item',{'filter-top-active':filterItem===0}]" @click="changeFilterItem(0)">默认</view>
						<view :class="['filter-top-item',{'filter-top-active':filterItem===1}]" @click="changeFilterItem(1)">已上架</view>
						<view :class="['filter-top-item',{'filter-top-active':filterItem===2}]" @click="changeFilterItem(2)">未上架</view>
						<view :class="['filter-top-item',{'filter-top-active':filterItem===3}]" @click="changeFilterItem(3)">已删除</view>
					</view>
				<view class="filter-bottom  u-flex">
					<u-dropdown :isFilterMenu="true" @open="dropOpen" @close="reloadFn"
					 ref="filterDropdown" class="filter-drop-container" :active-color="'#ff551a'" :titleStyle="{}" 
					 :menu-icon="'arrow-down-fill'" :menu-icon-size="10" >
						<u-dropdown-item title="品牌" >
							<view class="slot-content" >
								<view class="u-flex link-view" style="">
									<view class="link-view-item" style="background-color: #FAFAFA;"></view>
									<view class="link-view-item" style="margin: 0 24rpx;"></view>
									<view class="link-view-item" style=""></view>
								</view>
								<view class="filter-brand-dad">
									<view v-show="brandLoading" class="u-flex u-row-center u-col-center" style="height: 300rpx;">
										<u-loading mode="circle" color="#ff551a" ></u-loading>
									</view>
									<view 
									v-show="!brandLoading">
										<scroll-view scroll-y="true" style="height: 280rpx;">
											<view class="u-flex " style="flex-wrap: wrap;padding: 30rpx 10rpx;box-sizing: border-box;">
												<view v-for="(child,childIndex) in brandList"
												 @click="chooseBrandFn(childIndex)" class="brand-item u-flex"  :key="child.id" >
													<view :style="{'color':child.checked?'#ff551a':'#333','flex':1}" :class="['u-line-1','u-font-28']">{{child.name}}</view>
													<u-icon name="checkmark" v-if="child.checked" color="#ff551a"></u-icon>
												</view>
											</view>
										</scroll-view>
									</view>
									<view class="u-p-35">
										<view class="btn-group u-flex">
											<view class="filter-reset u-text-center" @click="resetBrandFn">重置</view>
											<view class="filter-confirm u-text-center" @click="submitBtnClickFn()">确定</view>
										</view>
									</view>
								</view >
							</view>
						</u-dropdown-item>
						<u-dropdown-item title="分类" >
							<view class="slot-content" style="background-color: #FAFAFA;">
								<view class="u-flex link-view" >
									<view class="link-view-item"></view>
									<view class="link-view-item" style="margin: 0 24rpx;background-color: #FAFAFA;"></view>
									<view class="link-view-item"></view>
								</view>
								<view class="filter-class-dad">
									<view v-show="classLoading" class="u-flex u-row-center u-col-center" style="height: 300rpx;">
										<u-loading mode="circle" color="#ff551a" ></u-loading>
									</view>
									<view v-if="classList.length === 0&&!classLoading" class="u-p-t-50 u-p-b-50">
										<view class="u-flex u-m-l-30 u-m-r-30" style="flex-direction: column;align-items: center;">
											<image src="/static/home/noMore.png" mode="heightFix" style="height:100rpx;margin: 0 auto;display: block;"></image>
											<text class="u-font-10 u-m-t-6" style="color:#999">没有可筛选的分类</text>
										</view>
									</view>
									<view v-else>
										<scroll-view scroll-y="true" style="height: 400rpx;" v-show="!classLoading">
											<u-collapse :accordion="false" >
												<u-collapse-item class="class-collapse-item" 
												@change="classCollapseChange"
												:disabled="item.children.length === 0" :index="index" v-for="(item, index) in classList" :key="item.id">
													<template #title-all>
													<view class="u-flex u-row-between u-p-l-20 u-p-r-20 class-header" style="width: 100%;">
														<view class="u-flex">
															<view 
															@click.stop="chooseClassFn($event,'dad',item.checked,index)" 
															:class="['u-flex','u-row-center', 'u-m-r-20', 'choose-class-mark',{'choose-class-mark-active':item.checked}]">
																<u-icon name="checkmark" v-show="item.checked" color="#ff551a" size="24" class="class-icon"></u-icon>
															</view>
															<view>{{item.name}}</view>
														</view>
														<view class="u-flex" v-if="item.children.length!==0">
															<view>{{!item.open?'展开':'收起'}}</view>
															<view :class="['iconfont', 'icon-arrow-up-filled', 'class-down-icon',{'class-down-icon-rotate':item.open}]"></view>
														</view>
													</view>
													</template>
													<view class="class-item-container u-flex" @click.stop="">
														<view class="class-item u-line-1 u-flex" 
														@click="chooseClassFn($event,'child',child.checked,index,childIndex)" 
														v-for="(child,childIndex) in item.children" :key="child.id">
															<view :style="{'color':child.checked?'#ff551a':'#333','flex':1}" 
															:class="['u-line-1','u-font-28']">
																{{child.name}}
															</view>
															<u-icon name="checkmark" v-if="child.checked" color="#ff551a" class="u-m-l-10 u-m-r-10"></u-icon>
														</view>
													</view>
												</u-collapse-item>
											</u-collapse>
										</scroll-view>
										<view class="u-p-35">
											<view class="btn-group u-flex">
												<view class="filter-reset u-text-center" @click="resetClassFn">重置</view>
												<view class="filter-confirm u-text-center" @click="submitBtnClickFn()">确定</view>
											</view>
										</view>
									</view>
								</view >
							</view>
						</u-dropdown-item>
						<u-dropdown-item title="标签" >
							<view class="slot-content" >
								<view class="u-flex link-view" style="">
									<view class="link-view-item" style="background-color: #FAFAFA;"></view>
									<view class="link-view-item" style="margin: 0 24rpx;"></view>
									<view class="link-view-item" style=""></view>
								</view>
								<view class="filter-brand-dad">
									<view v-show="tagLoading" class="u-flex u-row-center u-col-center" style="height: 300rpx;">
										<u-loading mode="circle" color="#ff551a" ></u-loading>
									</view>
									<view 
									v-show="!tagLoading">
										<scroll-view scroll-y="true" style="height: 280rpx;">
											<view class="u-flex " style="flex-wrap: wrap;padding: 30rpx 10rpx;box-sizing: border-box;">
												<view v-for="(child,childIndex) in tagList"
												 @click="chooseTagFn(childIndex)" class="brand-item u-flex"  :key="child.id" >
													<view :style="{'color':child.checked?'#ff551a':'#333','flex':1}" :class="['u-line-1','u-font-28']">{{child.name}}</view>
													<u-icon name="checkmark" v-if="child.checked" color="#ff551a"></u-icon>
												</view>
											</view>
										</scroll-view>
									</view>
									<view class="u-p-35">
										<view class="btn-group u-flex">
											<view class="filter-reset u-text-center" @click="resetTagFn">重置</view>
											<view class="filter-confirm u-text-center" @click="submitBtnClickFn()">确定</view>
										</view>
									</view>
								</view >
							</view>
						</u-dropdown-item>
					</u-dropdown>
				</view>
				</view>
			</view>
			</template>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="owner-item-container" v-for="(item,index) in dataList" :key="index">
				<view class="delete-box u-flex u-row-center" v-if="item.isDeleted">
					<view class="iconfont icon-yishanchu"></view>
				</view>
				<view class="payorder-section" @click="itemClick(item.id)">
					<image :src="item.resourceUrl?item.resourceUrl:defaultLogo" mode="" class="section-image" ></image>
					<view class="section-list ">
						<view class="section-item u-m-l-18">
							<view class="section-item-name u-line-1" style="width:100%;">
							{{item.name}}
							</view>
							<view class="u-font-24 u-m-t-10" v-if="item.specification" style=" display: inline-block; color: #999;background-color: #f8f8f8;padding: 10rpx 12rpx;border-radius: 10rpx;">
								{{item.specification}}
							</view>
						</view>
					</view>
					<view class="u-flex u-col-center u-row-between u-m-l-20" style="height: 100%;">
						<view class="section-btn-box u-m-r-30" >
							<image :src="item.brandResourceUrl" mode="" style="height: 110rpx;width: 110rpx;"></image>
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="item-bot u-flex u-row-between" @click.stop="" v-if="!item.isDeleted">
					<view class="item-tag-list u-line-1" v-if="item.tags.length !== 0">
						<text class="tag-item" v-for="i in item.tags" :key="i.id">{{i.name}}</text>
					</view>
					<view class="item-tag-list  " v-else>
						<text class="tag-item tag-item-no">无标签</text>
					</view>
					<view class="item-bot-rt " >
						<text class="u-font-22 u-m-r-16" style="color: #999;">{{item.isHaltSale?'已下架':'已上架'}}</text>
						<text @click="toggleItemStatus(item.id)" :class="['goods-status',{'off-shelf':item.isHaltSale}]">{{item.isHaltSale?'立即上架':'下架商品'}}</text>	
						<text class="goods-status u-m-l-16" @click="openDelModel(item.id,item.isDeleted)">删除商品</text>	
					</view>	
				</view>
				<view class="item-bot u-flex u-row-right" @click.stop="" v-else>
					<view class="item-bot-rt " >
						<text class="goods-status reset-btn" @click="resetItem(item.id)">恢复</text>	
						<text class="goods-status u-m-l-16" @click="openDelModel(item.id,item.isDeleted)">彻底删除</text>	
					</view>	
				</view>
			</view>
		</z-paging>
		<u-modal v-model="delModel" :content="delContent"  @confirm="delItemFn()" showCancelButton></u-modal>
	</view>
</template>

<script>
	import { useShopStore } from '@/store/shop.js';
	import { mapState } from 'pinia';
	export default {
		data() {
			return {
				//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				dataList: [],
				searchText:'',
				editTemplate:false,
				delModel:false,
				templateName:'',
				chooseTemplateId:'',
				editType:'',
				brandLoading:false,
				brandList:[],
				classList:[],
				reqBrandFailed:false,
				classLoading:false,
				tagLoading:false,
				tagList:[],
				filterItem:0,
				delContent:'您确定要移除此商品吗？',
				delItemId:'',
				delModel:false,
				isDeleted:false,
				
			}
		},
		created(){
			// this.$refs.paging.reload();
		},
		computed:{
			searchBrand(){
				let ary = [];
				this.brandList.map(item=>{
					if(item.checked){
						ary.push(item.id)
					}
				});
				return ary;
			},
			searchClass(){
				let ary = [];
				 this.classList.map(item => {
					if(item.checked){
						ary.push(item.id);
					};
					if(item.children.length!==0){
						item.children.map(child=>{
							if(child.checked){
								ary.push(child.id);
							}
						})
					}
					
				});
				return ary;
			},
			searchTag(){
				let ary = [];
				this.tagList.map(item=>{
					if(item.checked){
						ary.push(item.id)
					}
				});
				return ary;
			},
			...mapState(useShopStore, {
				storeShop: 'shop',
			})	
		},
		methods: {
			openDelModel(id,isDeleted){
				this.delContent = `您确定要${isDeleted?'彻底':''}移除此商品吗？`;
				this.delItemId = id;
				this.isDeleted = isDeleted;
				this.delModel = true;
			},
			async delItemFn(){
				uni.showLoading({
					title:"loading..."
				});
				let params = {
					id:this.delItemId,
					shopId:this.storeShop.id,
					isDeleted:!this.isDeleted
				}
				// let params = `?id=${this.delItemId}&shopId=${this.$store.state.shop.shop.id}&isDeleted=${this.isDeleted}`;
				const res = await this.$newHttp.delete('api/BrandOwner/DeleteItem',params );
				uni.hideLoading()
				if(res.code === 200){
					this.$refs.paging.refresh();
				}else{
					this.$u.toast('删除商品失败，错误信息：'+res.erroMessage);
				}
			},
			
			// 恢复商品删除状态
			async resetItem(id){
				uni.showLoading({
					title:"loading..."
				});
				let params = {
					id:id,
					shopId:this.storeShop.id,
				}
				const res = await this.$newHttp.post('api/v1.2/BrandOwner/ToggleItemDeletion', params );
				uni.hideLoading()
				if(res.code === 200){
					this.$refs.paging.refresh();
				}else{
					this.$u.toast('恢复商品失败，错误信息：'+res.erroMessage);
				}
			},
			// 切换商品上下架
			async toggleItemStatus(id){
				uni.showLoading({
					title:"loading..."
				});
				let params = {
					id:id,
					shopId:this.storeShop.id,
				}
				const res = await this.$newHttp.post('api/v1.2/BrandOwner/ToggleItemHaltSale', params );
				uni.hideLoading()
				if(res.code === 200){
					this.$refs.paging.refresh();
				}else{
					this.$u.toast('更改商品状态失败，错误信息：'+res.erroMessage);
				}
			},
			// 筛选框上部按钮点击
			changeFilterItem(index){
				this.filterItem = index;
				this.reloadFn()
			},
			submitBtnClickFn(){
				this.$refs['filterDropdown'].close();
			},
			// 重置品牌筛选
			resetBrandFn(){
				this.brandList.map(item=>{
					item.checked = false;
				})
			},
			// 重置分类选择
			resetClassFn(){
				this.classList.map(item=>{
					item.checked = false;
					if(item.children.length!==0){
						item.children.map(child=>{
							child.checked = false;
						})
					}
					
				})
			},
			// 重置标签筛选
			resetTagFn(){
				this.tagList.map(item=>{
					item.checked = false;
				})
			},
			// 打开下拉菜单
			dropOpen(index){
				if(this.brandList.length === 0&&index === 0){
					this.getBrandList();
				}
				if(this.classList.length === 0&&index === 1){
					this.getClassListFn();
				}
				if(this.tagList.length === 0&&index === 2){
					this.getTagList();
				}
				
			},
			chooseBrandFn(index){
				this.$set(this.brandList[index],'checked',!this.brandList[index].checked)
			},
			chooseTagFn(index){
				this.$set(this.tagList[index],'checked',!this.tagList[index].checked)
			},
			// 获取品牌列表
			async getBrandList(){
				this.brandLoading = true;
				this.reqBrandFailed = false;
				const params = {
					pageIndex: 1,
					pageSize: 9999,
					shopId:this.storeShop.id,
					isDeleted:false
				}
				const res = await this.$newHttp.get('api/BrandOwner/GetBrandsByPage', {params:params} );
				this.brandLoading = false;
				if(res.code === 200){
					this.brandList = res.data.list.map(item=>{
						item.checked = false;
						return item;
					});
				}else{
					this.reqBrandFailed = true;
					this.brandList = [];
				}
			},
			// 获取分类列表
			async getClassListFn() {
				this.classLoading = true;
			   let params = {
					ShopId:this.storeShop.id,
					IncludeChildren:true
			   }
			   const res = await this.$newHttp.get('api/BrandOwner/GetCategories', { params: params } );
			   this.classLoading = false;
				if (res.code === 200) {
					res.data.map(item => {
						item.checked = false;
						item.open = false;
						item.children.map(child => {
							child.checked = false;
						});
					})
					this.classList = res.data;
			   } else {
				   this.classList = [];
				   this.$message.error('获取分类列表失败，错误信息：'+res.erroMessage)
			   }
			},
			// 获取标签列表
			async getTagList(){
				this.tagLoading = true;
				this.reqBrandFailed = false;
				const params = {
					pageIndex: 1,
					pageSize: 9999,
					shopId:this.storeShop.id,
					isDeleted:false
				}
				const res = await this.$newHttp.get('api/v1.2/BrandOwner/GetItemTagsPage', {params:params} );
				this.tagLoading = false;
				if(res.code === 200){
					this.tagList = res.data.list.map(item=>{
						item.checked = false;
						return item;
					});
				}else{
					this.reqBrandFailed = true;
					this.tagList = [];
				}
			},
			// 分类筛选的 展开和收起判断
			classCollapseChange(data){
				this.classList[data.index].open = data.show;
			},
			// 重置分类选择
			resetClassFn(){
				this.classList.map(item=>{
					item.checked = false;
					if(item.children.length!==0){
						item.children.map(child=>{
							child.checked = false;
						})
					}
					
				})
			},
			// 选择分类
			chooseClassFn(event,type,checked,index,childIndex){
				if(type==='dad'){
					this.classList[index].checked = !checked;
					if(this.classList[index].children.length!==0){
						this.classList[index].children.map(item=>{
							item.checked = !checked;
						})
					}
				}else{
					this.classList[index].children[childIndex].checked = !checked;
				}
			},
			reloadFn(){
				this.$refs.paging.reload();
			},
			// 编辑模板名称弹窗开启
			editTemplateTapFn(type,name,id){
				if(type === 'add'){
					this.chooseTemplateId = '';
					this.templateName = '';
				}else{
					this.chooseTemplateId = id;
					this.templateName = name;
				}
				this.editType = type;
				this.editTemplate = true;
			},
			async queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pageIndex: pageNo,
					pageSize: pageSize,
					shopId:this.storeShop.id,
					isDeleted:false,
					
				}
				if(this.filterItem === 1){
					params.isHaltSale = false;
				}
				if(this.filterItem === 2){
					params.isHaltSale = true;
				}
				if(this.filterItem === 3){
					params.isDeleted = true;
				}
				if(this.searchText!==''){
					params.name = this.searchText;
				}
				if(this.searchBrand.length!==0){
					params.brandIds = this.searchBrand;
				}
				if(this.searchClass.length!==0){
					params.categoryIds = this.searchClass;
				}
				if(this.searchTag.length!==0){
					params.tagIds = this.searchTag;
				}
				uni.showLoading({
					title: '加载中...',
					mask: false
				});
				const res = await this.$newHttp.post('api/BrandOwner/GetItemsByPage', params );
				uni.hideLoading({
					title: '加载中...'
				})
				if(res.code === 200){
					this.$refs.paging.complete(res.data.list);
				}else{
					this.$refs.paging.complete(false);
				}
			},
			itemClick(id) {
				this.$mRouter.push({ route: '/pages/owners/productMange/productDetails?id='+id+'&type=edit'})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/iconfont/iconfont.css';
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.owner-item-content {
		height: 100%;
		.filter-container{
			background-color: #fff;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			height: 190rpx;
			width: 100%;
			.filter-top{
				.filter-top-item{
					flex:1;
					margin: 20rpx 0;
					text-align: center;
					font-size: 28rpx;
					color:#999999;
				}
				.filter-top-active{
					font-size: 30rpx;
					color: #333;
				}
			}
			.filter-bottom{
				.filter-drop-container{
					box-sizing: border-box;
					padding: 0 30rpx;
					
					::v-deep .u-dropdown__menu__item{
						background: #FAFAFA;
						border-radius: 34rpx;
						&:nth-last-of-type(2){
							margin: 0 20rpx;
						}
					}
					::v-deep .filter-dropitem-active{
						border-bottom-left-radius: 0px;
						border-bottom-right-radius: 0px;
					}
					.link-view{
						height: 20rpx;background-color: #fff;box-sizing: border-box;padding: 0 30rpx;
						.link-view-item{
							height: 20rpx;
							flex:1;
						}
					}
					
				}
			}
		}
		.filter-brand-dad{
			background-color: #FAFAFA;
			// border-radius: 30rpx;
			.brand-item{
				width: 33.3%;
				box-sizing: border-box;
				padding: 12rpx 30rpx;
				.brand-all{
					color: #ccc !important;
				}
			}
		}
		.filter-class-dad{
			background-color: #FAFAFA;border-radius: 30rpx;
			padding: 30rpx;
			.class-collapse-item{
				background-color: #fff;
				border-radius: 16rpx;
				border: 1px solid #e7e7e7;
				margin-bottom: 10rpx;
				.class-header{
					.choose-class-mark{
						width: 42rpx;
						height: 42rpx;
						border-radius: 50%;
						box-sizing: border-box;
						border: 2px solid #7c7c7c;
						
					}
					.choose-class-mark-active{
						border-color: #ff551a;
					}
					.class-icon{
						::v-deep .uicon-checkmark{
							font-weight: bolder !important;
						}
					}
					.class-down-icon{
						transform: rotate(180deg);
					}
					.class-down-icon-rotate{
						transition: transform .3s;
						transform: rotate(0deg);
					}
				}
			}
			.class-item-container{
				width: 100%;
				flex-wrap: wrap;
				box-sizing: border-box;
				padding: 0 20rpx 10rpx 20rpx;
				.class-item{
					width: 33.3%;
					box-sizing: border-box;
					padding: 12rpx 0 12rpx 0;
				}
			}
			
		}
		.btn-group{
			border-radius: 50rpx;
			overflow: hidden;
			.filter-reset{
				box-sizing: border-box;
				padding: 24rpx 0;
				flex:1;
				background-color: #DDDDDD;
			}
			.filter-confirm{
				box-sizing: border-box;
				padding: 24rpx 0;
				flex:1;
				background-color: #FFBB1A;
			}
		}
	}
	.owner-item-container{
		background-color: #fff;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		position: relative;
		.delete-box{
			width: 100%;
			height: 100%;
			position: absolute;
			top:0;
			left: 0;
			z-index: 2;
			&::after{
			  content:'';
			  width: 100%;
			  height: 100%;
			  position: absolute;
			  display: block;
			  background-color: #ccc;
			  opacity: 0.5;
			}
			.iconfont{
			  font-size:48px;color: #ff551a;z-index: 3;
			}
		 }
		.payorder-header{
			display: flex;
			justify-content: space-between;
		}
		.payorder-section{
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 35rpx 30rpx;
			.section-image{
				width: 110rpx;
				height: 110rpx;
				display: block;
				border-radius: 10rpx;
				margin-right: 32rpx;
			}
			.section-list{
				flex: 1;
				overflow: hidden;
				// margin-left: 20rpx;
				.section-btn{
					width: 160rpx;
					margin-left: 10rpx;
					height:70rpx;
					border-radius: 35rpx;
					border: 1rpx solid #FFBB1A;
					color: #FFBB1A;
					text-align: center;
					line-height: 70rpx;
				}
				.section-btn-disabled{
					border-color:#999999;
					color: #999999;
				}
				.section-item{
					width: 100%;
					.section-item-name{
						font-size: 32rpx;
						font-weight: 500;
					}
					.section-item-count{
						font-size: 24rpx;
						color: #999;
					}
					
				}
			}
			.section-btn-box{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				>.btn-text{
					font-size: 20rpx;
					margin-top: 10rpx;
				}
			}
			
		}
		.del-item-mask{
			
		}
		.item-bot{
			box-sizing: border-box;
			padding: 15rpx 30rpx;
			border-top: 1rpx solid #EEEEEE;
			.item-tag-list{
				width: 300rpx;
				.tag-item{
					font-size: 22rpx;
					color: #1AA1FF;
					border-radius: 5rpx;
					border: 1rpx solid #1AA1FF;
					margin-right: 4rpx;
					padding: 0 4rpx;
				}
				.tag-item-no{
					width: 90rpx;
					color: #999;
					border: 1rpx solid #999;
				}
			}
			.item-bot-rt{
				z-index: 3;
				.goods-status{
					font-size: 24rpx;
					padding: 0 8rpx;
					color: #FF551A;
					border-radius: 18rpx;
					border: 1rpx solid #FF551A;
				}
				.off-shelf{
					color: #329B0E;
					border: 1rpx solid #329B0E;
				}
				.reset-btn{
					color: #fff;
					background-color: #FF551A;
					padding: 0 28rpx;
				}
			}
		}
	}


</style>
